@import './icon.scss';
@import './iconColor.scss';

.app-container {
    padding: 10rpx 20rpx;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.p10 {
    padding: 10rpx;
}

.p16 {
    padding: 16rpx;
}

.pr10 {
    padding-right: 10rpx;
}

.pl10 {
    padding-left: 10rpx;
}

.pt10 {
    padding-top: 10rpx;
}

.pb10 {
    padding-bottom: 10rpx;
}

.mt16 {
    margin-top: 16rpx;
}

.mb16 {
    margin-bottom: 16rpx;
}

.ml16 {
    margin-left: 16rpx;
}

.mr16 {
    margin-right: 16rpx;
}

.mr20 {
    margin-right: 20rpx;
}

.mt20 {
    margin-top: 20rpx;
}

.mb20 {
    margin-bottom: 20rpx;
}

.ml20 {
    margin-left: 20rpx;
}

.mr26 {
    margin-right: 26rpx;
}

.mt26 {
    margin-top: 26rpx;
}

.mb26 {
    margin-bottom: 26rpx;
}

.ml26 {
    margin-left: 26rpx;
}

.mt8 {
    margin-top: 8rpx;
}

.mb8 {
    margin-bottom: 8rpx;
}

.ml8 {
    margin-left: 8rpx;
}

.mr8 {
    margin-right: 8rpx;
}

.mb36 {
    margin-bottom: 36rpx;
}

.block {
    display: block;
}

.text-center {
    text-align: center
}

.weight {
    font-weight: 800;
}

.grey {
    color: #707070;
}

.dark-gray {
    color: #333333;
}

.purple {
    color: #966BFF;
}

.white {
    color: #fff;
}

.text-underline {
    text-decoration: underline;
}

.light-red {
    color: #F65773;
}


$font-sizes: (
  36: 36rpx,
  32: 32rpx,
  30: 30rpx,
  28: 28rpx,
  24: 24rpx,
  22: 22rpx,
  26: 26rpx,
  20: 20rpx,
  16: 16rpx,
);

@each $size, $value in $font-sizes {
  .font#{$size} {
    font-size: $value;
  }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.align-stretch {
    display: flex;
    align-items: stretch;
}

.align-center {
    display: flex;
    align-items: center;
} 

.align-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.justify-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.flex1 {
    flex: 1;
}